<template>
    <div class="home-container">
      <!-- 导航栏 -->
      <div class="bar-contanier">
        <nav-bar>
        <template #center>
          <van-button icon="search" round to='/search'>搜索</van-button>
        </template>
      </nav-bar>
      </div>
      <!-- 标签页 -->
      <div class="tabs-container">
        <van-tabs v-model="activeChannel"  border >
          <van-tab
          v-for='item in channelsList'
          :title="item.name"
          :key="item.id+'only'"
          >
          <article-area :channelId="item.id" class="article-area-contianer"></article-area>
          </van-tab>
          <template #nav-right>
            <!-- 占位,防止标签滑到底被挡住一部分 -->
            <div class="placeholder"></div>
           <van-icon name="wap-nav" class="ham-icon" @click="isShowChannelEdit = true"/>
          </template>
        </van-tabs>
      </div>
      <!-- 弹出层 -->
      <van-popup
      v-model="isShowChannelEdit"
      position="bottom"
      :style="{ height: '100%' }"
      closeable
      get-container="body"
      >
      <popup-channel :channels="channelsList" @switchChannel="handleSwitchChannel" :active-index="activeChannel" @update-active='activeChannel--'></popup-channel>
      </van-popup>
    </div>

</template>

<script>
import { storageMinxis } from '../../mixins/storage'
import NavBar from 'components/NavBar'
import ArticleArea from 'components/ArticleArea'
import PopupChannel from './homechild/PopupChannel.vue'
import { getUserChannels } from 'network/user'
import { mapState } from 'vuex'
export default {
  mixins: [storageMinxis],
  components: { NavBar, ArticleArea, PopupChannel },
  name: 'home',
  data () {
    return {
      active: 0,
      // 用户频道列表
      channelsList: [],
      channelId: 0,
      // 当前激活的频道
      activeChannel: 0,
      // 是否显示弹出层
      isShowChannelEdit: false
    }
  },
  created () {
    this.onloadChannelsList()
  },
  methods: {
    // 获得频道列表
    // 用户有token,获取用户专属的频道
    // 用户没token,本地没有存频道,就给默认的推荐频道,有频道获取本地的频道
    async onloadChannelsList () {
      if (this.userState || this.getItem('userChannels') === null) {
        const { data: res } = await getUserChannels()
        this.channelsList = res.data.channels
        console.log(this.channelsList)
        this.channelId = this.channelsList[0].id
      } else if (this.getItem('userChannels')) {
        this.channelsList = this.getItem('userChannels')
      }
    },
    // 处理切换频道事件
    handleSwitchChannel (index) {
      this.activeChannel = index
      // 隐藏弹出层
      this.isShowChannelEdit = false
    }
  },
  computed: {
    ...mapState(['userState'])
  }
}
</script>

<style lang='less' scoped>
  .home-container{
    padding-top: 46px;
    .bar-contanier{
    /deep/  .van-nav-bar__title{
        max-width: 100%;
      }
      .van-button--default{
        background-color: #5babfb;
        width: 280px;
        height: 33px;
        border: none;
        color: #fff;
        font-size: 14px;
      }
    }
    .tabs-container{
     /deep/ .van-tab{
        border-bottom: 1px solid #eee;
        &:not(:first-child){
          border-left: 1px solid #eee;
        }
      }
     /deep/ .van-tabs__line{
       bottom: 0.5rem;
     }
    /deep/  .van-icon{
    position: fixed;
    right: 0;
    height: 43px;
    line-height: 43px;
    background-color: #fff;
    opacity: 0.9;
    &::after{
      content: '';
      height: 30px;
      width: 1px;
      background-image: url('~assets/images/home/line.png');
      position: absolute;
      left:-8px;
      top:22px;
      transform: translateY(-50%);
    }
  }
    .placeholder{
      width: 24px;
      height: 43px;
     flex-shrink: 0;
    }
    }
  }
</style>
